// Vue.component('x-swiper', {
//   props: {
//     data: Array,
//   },
//   data() {
//     return {
//       timer: null,
//       translateX: 0,
//       transition: 'none'
//     }
//   },
//   computed: {
//     style() {
//       return {
//         transform: 'translateX(' + this.translateX + 'px)',
//         transition: this.transition,
//       }
//     }
//   },
//   template: ` 
//   <div ref="rotationpic" :style="style" id="rotationpic">
//     <img v-for="item in data" :src="item.pic" >
//   </div>
//   `,
//   mounted() {
//     var startx, endx, nx;
//     var that = this;
//     var rotationpic = this.$refs.rotationpic;
//     var translateX = 0;
//     function time() {
//       if (!rotationpic) {
//         clearInterval(that.timer);
//         return;
//       }
//       var x = rotationpic.offsetWidth;
//       translateX -= x;
//       that.translateX = translateX;
//       that.transition = 'all .5s ease';
//       if (translateX == -5 * x) {
//         setTimeout(function () {
//           translateX = 0;
//           that.translateX = translateX;
//           that.transition = 'all 0s ease';
//         }, 500);
//       }
//     }
//     that.timer = setInterval(time, 2000);
//     rotationpic.ontouchstart = function (ev) {
//       if (!rotationpic) {
//         clearInterval(that.timer);
//         return;
//       }
//       clearInterval(that.timer);
//       var x = rotationpic.offsetWidth;
//       var touch = ev.touches[0];//获取开始的位置数组的第一个触摸位置
//       startx = Math.floor(touch.pageX);//获取第一个坐标的X轴
//       rotationpic.ontouchmove = function (ev) {
//         var touch = ev.touches[0];
//         movex = Math.floor(touch.pageX);
//         //获取开始位置和离开位置的距离
//         //判断滑动方向
//       };
//       rotationpic.ontouchend = function (ev) {
//         // var time1=setInterval(time,4000);
//         var touch = ev.touches[0];
//         endx = Math.floor(ev.changedTouches[0].pageX);
//         nx = endx - startx;
//         if (nx > 0) {
//           if (translateX + x == 0 || translateX == 0) {
//             setTimeout(function () {
//               translateX = (-5 * x);
//               that.translateX = translateX;
//               that.transition = 'all 0s ease';
//             }, 500);
//           } if (translateX != 0) {
//             setTimeout(function () {
//               translateX += x;
//               that.translateX = translateX;
//               that.transition = 'all .5s ease';
//             }, 0);
//           }
//         } else if (nx < 0) {
//           if (translateX - x == (-5 * x) || translateX == (-5 * x)) {
//             setTimeout(function () {
//               translateX = 0;
//               that.translateX = translateX;
//               that.transition = 'all 0s ease';
//             }, 500);
//           }
//           if (translateX != (-5 * x)) {
//             setTimeout(function () {
//               translateX -= x;
//               that.translateX = translateX;
//               that.transition = 'all .5s ease';
//             }, 0)
//           }
//         }
//         that.timer = setInterval(time, 2000);
//       };
//     }
//   },
// })


Vue.component('x-header', {
  props: {
    logo: String,
  },
  data() {
    return {
    }
  },
  template: `<div class="header">
  <i v-if="logo=='商品详情'"><</i><h1><slot>{{logo}}</slot></h1>
  </div>`,
})

Vue.component('xTabbar', {
  props: {
    data:Array,
    value:[String,Number]
  },
  routerLinkActive:'active',
  data() {
    return {
    }
  },
  template: `
  <div class="tabbar">
    <router-link :to="item.href" v-for="item in data" :key="item.id">
    <div class="shouye-nav" id="shouyenav">
      <i :class="item.icon" class="nav-icon"></i>
      <span>{{item.name}}</span>
    </div>
    </router-link>
  </div>
  `,
})